@import "./icon-font";
*,:after, :before {
	box-sizing: border-box;
}
@mixin flex($type){
  -webkit-display: flex;
  display: flex;
  flex-direction: $type;
}

.#{$me-prefix}-grid-self-center {
	place-self: center center;
}

.#{$me-prefix}-empty {
	@include flex(row);
	flex: 1;
	justify-content:center;
	align-items:center;
	color: darkgray;
}

.#{$me-prefix}-row { 
	@include flex(row);
}
.#{$me-prefix}-column {
	@include flex(column);
}

.#{$me-prefix}-center {
	justify-content: center !important;
	align-items: center !important;
}

.#{$me-prefix}-flex {
	flex: 1 1 0%;
}

.#{$me-prefix}-main-center {
	justify-content: center !important;
}
.#{$me-prefix}-main-start {
	justify-content: flex-start !important;
}
.#{$me-prefix}-main-end{
	justify-content: flex-end !important;
}
.#{$me-prefix}-cross-center {
	align-items: center !important;
}
.#{$me-prefix}-cross-start{
	align-items: flex-start !important;
}
.#{$me-prefix}-cross-end{
	align-items: flex-end !important;
}

/* 空间不足，可换行 */
.#{$me-prefix}-wrap {
	flex-wrap: wrap !important;
}

.#{$me-prefix}-min-width {
	width: 50px;
}

html, body {
	height: 100%;
	margin: auto;
}

.#{$me-prefix}-cursor-move{
	cursor: move;
}
.#{$me-prefix}-cursor-pointer{
	cursor: pointer;
}

.#{$me-prefix}-icon {
	cursor: pointer;
	align-self: center;
	font-size: 16px;
	margin: 0px;
}

.#{$me-prefix}-grid-center {
  display: grid;
  justify-items: center;
  align-items: center;
}

.#{$me-prefix}-disabled {
	* { cursor: not-allowed; }
}

.#{$me-prefix}-readonly {
	* { cursor: pointer; }
}

.#{$me-prefix}-cursor-pointer {
	&:hover { cursor: pointer; } 
}


@for $i from 2 through 12 {
	.#{$me-prefix}-grid-column-#{$i} {
		display: grid;
		grid-template-columns: repeat($i, auto);
	}
}

@each $item in 2,4,6,8, 5, 10,15,20,25,30 {
	.#{$me-prefix}-margin-child-#{$item} { > * { margin: #{$item}px; } }
	.#{$me-prefix}-padding-child-#{$item} { > * { padding: #{$item}px; } }
	.#{$me-prefix}-margin-#{$item} { margin: #{$item}px; }
	.#{$me-prefix}-padding-#{$item} { padding: #{$item}px; }
}

@each $item in red, green, blue {
	.#{$me-prefix}-border-#{$item} {
		border: 1px solid $item;
	}
}
.#{$me-prefix}-border {
	border: 1px solid $color-border;
}
